<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <el-form ref="form" :inline="true" :model="listQuery" style="margin-bottom:20px">
      <el-row>
        <el-col :md="5" :sm="24">
          <el-form-item label="订单号：">
            <el-input clearable v-model.trim="listQuery.orderNo" placeholder="请输入订单号" />
          </el-form-item>
        </el-col>
        <el-col :md="8" :sm="24">
          <el-form-item label="创建时间：">
            <el-date-picker
              v-model="datetimerange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :md="4" :sm="24">
          <el-form-item label="产品：">
            <el-select clearable v-model="listQuery.softwareSource" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="5" :sm="24">
          <el-form-item label="用户名称：">
            <el-input clearable v-model.trim="listQuery.username" placeholder="请输入用户名称" />
          </el-form-item>
        </el-col>
        <el-col :md="2" :sm="24">
          <el-button type="primary" @click="handleFilter">查找</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!-- 列表区域 -->
    <el-table v-loading="listLoading"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      :data="list" style="width: 100%">
      <el-table-column prop="orderNo" label="订单号" align="center" />
      <el-table-column prop="username" label="用户名称" align="center" />
      <el-table-column prop="softwareSource" label="产品" align="center" />
      <el-table-column prop="orderType" label="类型" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="payTime" label="支付时间" align="center" />
      <el-table-column prop="status" label="状态" width="80" align="center" />
      <el-table-column prop="originalPrice" label="原价" align="center" />
      <el-table-column prop="payMoney" label="应付金额" align="center" />
      <el-table-column fixed="right" label="操作" width="80" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleClick(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="changePagination"
    />
    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="isDetails" title="订单详情">
      <div>
        <h2>订单概要</h2>
        <el-form label-position="left" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单号：">
                <span>{{ row.orderNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单类型：">
                <span>{{ row.orderType }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="创建时间：">
                <span>{{ row.createTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付时间：">
                <span>{{ row.payTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="订单来源：">
            <span>{{ row.softwareSource }}</span>
          </el-form-item>
          <el-form-item label="支付状态：">
            <span>{{ row.status }} </span><span v-if="row.payMoney">￥{{ row.payMoney }}</span>
          </el-form-item>
          <el-table :data="orderSummaryData" style="width: 100%">
            <el-table-column prop="paymentChannel" label="支付渠道" align="center" />
            <el-table-column prop="payMoney" label="扣费费用" align="center" >
              <template slot-scope="scope">
                <div>￥{{scope.row.payMoney}}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="payTime"
              label="扣款时间"
              align="center"
            />
            <el-table-column prop="serialNumber" label="流水编号" align="center" />
            <el-table-column
              prop="paymentAccount"
              label="支付账号"
              align="center"
            />
          </el-table>
        </el-form>
      </div>
      <div>
        <h2>订单详情</h2>
        <el-table :data="orderDetailsData" style="width: 100%">
          <el-table-column prop="softwareSource" label="产品" align="center" />
          <el-table-column prop="quantity" label="数量" align="center" />
          <el-table-column prop="configure" label="具体配置" align="center" >
            <template slot-scope="scope">
              <div v-html="scope.row.configure"></div>
            </template>
          </el-table-column>
          <el-table-column prop="payMethod" label="付款方法" align="center" />
          <el-table-column
            prop="startStopTime"
            label="起止时间"
            align="center"
          />
          <el-table-column prop="payMoney" label="金额" align="center" >
            <template slot-scope="scope">
              <div>￥{{scope.row.payMoney}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="renewBox" v-if="row.orderType=='续费'">
        <h3>到期时间变更</h3>
        <p>续费前到期时间</p>
        <p>2021-09-28 12:00:00</p>
        <p>续费后到期时间</p>
        <p>2021-10-28 12:00:00</p>
      </div>
      <div class="moneyBox1">
        <div class="moneyBox2">
          <!-- <p>
            原价：<span>￥{{ row.originalPrice }}</span>
          </p>
          <p>活动优惠：<span>￥100.00</span></p>
          <p>
            应付金额：<span>￥{{ row.payMoney }}</span>
          </p> -->
          <div class="moneyBox21">
            <div>原价：</div>
            <div>活动优惠：</div>
            <div>应付金额：</div>
          </div>
          <div class="moneyBox22">
            <div>￥{{ row.originalPrice }}</div>
            <div>￥{{row.originalPrice&&row.payMoney?row.originalPrice-row.payMoney:0}}</div>
            <div>￥{{ row.payMoney }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { listOrder, detailOrder} from '@/api/order'
import dayjs from 'dayjs'
export default {
  name: 'OrderList',
  components: {
    Pagination
  },
  data () {
    return {
      listQuery: {
        orderNo: '',
        username: '',
        softwareSource: "",
        startTime: "",
        endTime: "",
        current: 1,
        size: 10,
      },
      datetimerange:[],
      options: [
        {
          value: 1,
          label: '取色软件'
        },
      ],
      total: 0,
      list: [],
      orderSummaryData: [
        {
          paymentChannel: '',//还没有的
          payMoney: '￥900.00',
          payTime: '2021-09-28 12:00:00',
          serialNumber: '1234567890',//还没有的
          paymentAccount: '',//还没有的
        }
      ],
      orderDetailsData: [
        {
          softwareSource: '取色软件',
          quantity: '1',//固定写1
          configure: 'aaaabbbbcccddd',//具体配置拼起来
          payMethod: '按月',
          startStopTime: '2021-09-28 12:00:00 2021-09-28 12:00:00',
          payMoney: '￥900.00'
        }
      ],
      row: {},
      isDetails: false,
      listLoading: true
      /* currentPage: 1,
      pageSize: 10,
      totalNum: 100 */
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 详情
    handleClick (row) {
      this.isDetails = true
      this.getDetailOrder(row.id)
    },
    getList () {
      this.listLoading = true
      if(this.datetimerange&&this.datetimerange[0]) {
        this.listQuery.startTime=dayjs(new Date(this.datetimerange[0])).format('YYYY-MM-DD HH:mm:ss')
      }else{
        this.listQuery.startTime=""
      }
      if(this.datetimerange&&this.datetimerange[1]) {
        this.listQuery.endTime=dayjs(new Date(this.datetimerange[1])).format('YYYY-MM-DD HH:mm:ss')
      }else{
        this.listQuery.endTime=""
      }
      listOrder(this.listQuery).then(response => {
        console.log("response.data.code",response.data)
        if(response.data.code==200){
          this.list = response.data.data.records
          this.total = response.data.data.total
        }
      }).finally(() => this.listLoading = false)
    },
    getDetailOrder (id) {
      // let data=new FormData()
      // data.append("id",id)
      detailOrder(id).then(response => {
        console.log("response.data.code",response.data)
        if(response.data.code==200){
          this.row = response.data.data
          this.orderSummaryData[0].paymentChannel = this.row.paymentChannel
          this.orderSummaryData[0].payMoney = this.row.payMoney
          this.orderSummaryData[0].payTime = this.row.payTime
          this.orderSummaryData[0].serialNumber = this.row.serialNumber
          this.orderSummaryData[0].paymentAccount = this.row.paymentAccount

          this.orderDetailsData[0].softwareSource = this.row.softwareSource
          let authentication=this.row.authentication=="01"?"一型一密":this.row.authentication=="02"?"一机一密":""
          this.orderDetailsData[0].configure = "产品名称："+this.row.productName+"<br/> 产品标签："+this.row.productFlag
            +"<br/> 授权方式:"+authentication+"<br/> 设备名称："+this.row.deviceName+"<br/> 注册编码："+this.row.registerNo
          this.orderDetailsData[0].payMethod = this.row.payMethod
          this.orderDetailsData[0].startStopTime =this.row.startTime||this.row.endTime?this.row.startTime+" "+this.row.endTime:""
          this.orderDetailsData[0].payMoney = this.row.payMoney
        }
      })
    },
    handleFilter () {
      this.listQuery.current = 1
      this.getList()
    },
    changePagination ({ page, limit }) {
      // console.log('changePagination', page, limit)
      if (page) this.listQuery.current = page
      if (limit) this.listQuery.size = limit
      this.getList()
    },
  }
}
</script>
<style lang="scss" scoped>
.renewBox {
  padding: 10px;
  margin: 10px 0;
  background-color: #f2f2f2;
}
.moneyBox1 {
  position: relative;
  height: 80px;
  background-color: #f2f2f2;
  .moneyBox2 {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    .moneyBox21 {
      width: 200px;
      position: absolute;
      right: 80px;
      text-align: right;
      div {
        margin-bottom: 5px;
      }
    }
    .moneyBox22 {
      div {
        margin-bottom: 5px;
      }
    }
  }
}
::v-deep .el-form-item.el-form-item--medium {
  margin-bottom: 0;
}
</style>
